<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>个人页面</title>
  <script>
    if(/http:/.test(location.href)) location.href = location.href.replace(/http:/, 'https:')
  </script>
  <script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
  <script src="__PUBLIC__/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="__PUBLIC__/node_modules/datatables/media/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" href="__PUBLIC__/node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="__PUBLIC__/style/manage.css">
  <link rel="stylesheet" href="__PUBLIC__/style/me.css">
</head>
<body>
  <!-- 隐藏功能元素区 -->
  <div class="hidden_form">
    <form autocomplete="off" action="__PUBLIC__/search" method="post" id = 'hidden_form'></form>
    <input type="hidden" name='佣金添加' id='manage_me_yongjing_add' value="{:U('Manageme/manage_me_yongjing_add')}">
    <input type="hidden" name='佣金修改' id='manage_me_yongjing_del' value="{:U('Manageme/manage_me_yongjing_del')}">
    <input type="hidden" name='佣金删除' id='manage_me_yongjing_update' value="{:U('Manageme/manage_me_yongjing_update')}">
  </div>
  <!-- end 隐藏功能元素区 -->

  <div class="container-fluid">
    <div class="col-xs-12" style="height:5px;"></div>
    <div class="col-xs-11 col-xs-offset-1">
      <!-- Nav tabs -->
      <iframe src="{:U('me')}?local=yongjing" frameborder="0" style="width:100%;"></iframe>
    </div>

    <div class="main">
      <!-- logo 区域 -->
      <div class="logo_img">
          <if condition="$Think.session.user.login_img neq null">
              <span><img src="__ROOT__/{$Think.session.user.login_img}" alt="LOGO"></span>
              <else/>
              <span><img src="__PUBLIC__/images/dengluye/u5.png" alt="u5"></span>
              </if>
        <br>
        <span>{$Think.session.user.u_name}</span>
      </div>
      <!-- end logo 区域 -->

      <!-- 表头 -->
      <div class="col-xs-offset-1 col-xs-10 table_title">
        <span>佣金设置</span>
        <!-- <img title = '添加渠道' id = 'images/dengluye/u80.png' src="__PUBLIC__/images/dengluye/u80.png" alt="u80"> -->
      </div>
      <!-- end 表头 -->
      <!-- 表格区 -->
      <div class="col-xs-offset-1 col-xs-10">
        <table class="messageBoxContent table table-striped table-bordered" id="main_table">
          <thead>
            <tr>
              <th class="No">序号</th>
              <th class="Object">对象</th>
              <th class="Local">提成</th>
              <th class="Date">设置</th>
            </tr>
          </thead>
          <tbody>
            <tr>
                <th class="No">1</th>
                <th class="Object">本级</th>
                <th class="Local LocalVar">
                  <span yj-id='{$list.0.yj_id}' yj-name='本级'>{$list.0.yj_pre}</span>
                  <input type="text" form="hidden_form" name="benji" id="benji" style="display:none;" value='{$list.0.yj_pre}' onchange="precentageThis(this)">
                </th>
                <td class="Modify">
                  <a href='javascript:void(0)' onclick="modifyThis(this)"><img title='下载列表' src="__PUBLIC__/images/dengluye/u41.png" alt="u41"></a>
                </td>
            </tr>
            <tr>
                <th class="No">2</th>
                <th class="Object">下壹级</th>
                <th class="Local LocalVar">
                  <span yj-id='{$list.1.yj_id}' yj-name='下壹级'>{$list.1.yj_pre}</span>
                  <input type="text" form="hidden_form" name="xiayiji" id="xiayiji" style="display:none;" value='{$list.1.yj_pre}' onchange="precentageThis(this)">
                </th>
                <td class="Modify">
                  <a href='javascript:void(0)' onclick="modifyThis(this)"><img title='下载列表' src="__PUBLIC__/images/dengluye/u41.png" alt="u41"></a>
                </td>
            </tr>
            <tr>
                <th class="No">3</th>
                <th class="Object">下贰级</th>
                <th class="Local LocalVar">
                  <span yj-id='{$list.2.yj_id}' yj-name='下贰级'>{$list.2.yj_pre}</span>
                  <input type="text" form="hidden_form" name="xiaerji" id="xiaerji" style="display:none;" value='{$list.2.yj_pre}' onchange="precentageThis(this)">
                </th>
                <td class="Modify">
                  <a href='javascript:void(0)' onclick="modifyThis(this)"><img title='下载列表' src="__PUBLIC__/images/dengluye/u41.png" alt="u41"></a>
                </td>
            </tr>
            <tr>
                <th class="No">4</th>
                <th class="Object">剩余</th>
                <th class="Local">
                  <span id='more_pre'>100%</span>
                </th>
                <td class="Modify">
                  <span>/</span>
                </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- end 表格区 -->

      <!-- 确认提交按钮 -->
      <div class='col-xs-12' style='text-align:center;'><input type="submit" value="提交比例" form="hidden_form" id='js-submit' style="display:inline-block;width:120px;height:40px;text-align:center;background-color:#007CB8;color:#fff;border:0;"></div>
    </div>

    <div style="clear:both;height:10vh;width:90vw;"></div>

    <!-- 页脚 -->
    <div class="col-xs-12">
      <div class="footer text-center"><p class="lead"><strong>深圳市東源匯信息科技有限公司</strong></p></div>
    </div>
    <!-- end 页脚 -->
  </div>

  <script>
    function modifyThis (_this) {
      var target = $(_this).parent().parent().children('.Local')
      target.children('span').css('display','none')
      target.children('input').val(target.children('span').text())
      target.children('input').css('display','unset')
      // event.preventDefault()
      // console.log($(_this).parent().children('.Local'))
    }
    function precentageThis (_this) {
      var value = $(_this).val()
      // 是否超过100%
      let sum = 0
      const preArray = [
        Number.parseFloat(`${$('#benji').val()}`.replace(/%/, '')),
        Number.parseFloat(`${$('#xiayiji').val()}`.replace(/%/, '')),
        Number.parseFloat(`${$('#xiaerji').val()}`.replace(/%/, '')),
      ]
      $.each(preArray, (index, item) => {
        if(Number.isFinite(item)) sum += item
      })
      if(sum > 100) {
        $(_this).val(0)
        $(_this).change()
        alert('数值超越100！')
        return
      } else {
        $('#more_pre').text(`${Number(100 - sum).toFixed(1)}%`)
      }
      if ( !/\%/.test(value) ) {
        var newValue = `${value}%`
        $(_this).val(newValue)
      }
    }
    function submitHandler (evt) {
      evt.preventDefault()
      let yj_text = ``
      const ajaxAddURL = $('#manage_me_yongjing_add').val()
      const ajaxUpdateURL = $('#manage_me_yongjing_update').val()
      const ajaxArray = []
      alert('正在提交，请稍候。。。')
      $.each($('.LocalVar span'), (index, item) => {
        if($(item).attr('yj-id') && $(item).attr('yj-id') !== '') {
          // update
          const promise = new Promise((resolve, reject) => {
            $.ajax(ajaxUpdateURL, {
              type: 'post',
              data: {
                yj_id: $(item).attr('yj-id'),
                yj_name: $(item).attr('yj-name'),
                yj_pre: $(item).siblings('input').val()
              }
            }).fail((err) => reject(err))
            .done((res) => {
              if (res.code && `${res.code}`.toLowerCase() === '1') resolve(res)
              else reject(res)
            })
          })
          console.dir(
            {
              yj_id: $(item).attr('yj-id'),
              yj_name: $(item).attr('yj-name'),
              yj_pre: $(item).siblings('input').val()
            }
          )
          ajaxArray.push(ajaxArray)
        } else {
          // add & update
          const promise = new Promise((resolve, reject) => {
            $.ajax(ajaxAddURL, {
              type: 'post',
              data: ''
            }).fail((err) => {
              reject(err)
            }).done((res) => {
              if (res.code && `${res.code}`.toLowerCase() === '1') resolve(res)
              else reject(res)
            })
          }).then(res => {
            return new Promise((resolve, reject) => {
              $.ajax(ajaxUpdateURL, {
                type: 'post',
                data: {
                  yj_id: res.data,
                  yj_name: $(item).attr('yj-name'),
                  yj_pre: $(item).siblings('input').val()
                }
              }).fail((err) => reject(err))
              .done((res) => {
                if (res.code && `${res.code}`.toLowerCase() === '1') resolve(res)
                else reject(res)
              })
            })
          })
          ajaxArray.push(promise)
        }
      })
      Promise.all(ajaxArray).then(_ => {
        alert('提交成功')
        location.reload(true)
      }).catch((err) => {
        alert('提交失败，请刷新页面重试')
        locaction.reload(true)
      })
    }
    $(document).ready(function () {
      var proList = $('#main_table').DataTable({
        "paging": false,
        "info": false,
        "searching": false,
        "ordering": false
      })
      // ajax提交
      $('#js-submit').on({click: submitHandler}, {})
      // 修改剩余比例
      // 是否超过100%
      let sum = 0
      const preArray = [
        Number.parseFloat(`${$('#benji').val()}`.replace(/%/, '')),
        Number.parseFloat(`${$('#xiayiji').val()}`.replace(/%/, '')),
        Number.parseFloat(`${$('#xiaerji').val()}`.replace(/%/, '')),
      ]
      $.each(preArray, (index, item) => {
        if(Number.isFinite(item)) sum += item
      })
      if(sum > 100) {
        alert('数值超越100！')
        return
      } else {
        $('#more_pre').text(`${100 - sum}%`)
      }
    })
  </script>
</body>
</html>